<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>图书管理系统</title>
		<script src="/js/laydate/laydate.js"></script>
	</head>
	<style type="text/css">
		/*全局设置*/
		
		* {
			margin: 0;
			padding: 0;
		}
		/*顶部栏*/
		
		.g-top {
			width: 100%;
			height: 75px;
			position: fixed;
			top: 0;
			background-color: grey;
			border-bottom: 1px solid blac k;
			box-shadow:4px 2px 6px  #000000;
		}
		/*中间内容*/
		
		.g-body {
			margin-top: 75px;
			width: 70%%;
			min-height: 700px;
			margin-left: 15%;
			border-left: 2px solid black;
			background-image: url(/image/0.jpg);
		}
		/*脚部*/
		
		.g-foot {
			width: 85%;
			height: 70px;
			position: fixed;
			bottom: 0;
			left: 15.2%;
			background-color: white;
			opacity: 0.3;
		}
		/*脚部文字*/
		
		.u-btm {
			text-align: center;
			margin-top: 30px;
		}
		/*导航主题,列表，登录*/
		
		.u-title {
			width: 30%;
			float: left;
			margin-bottom: 16px;
		}
		
		.u-title> h1 {
			text-align: center;
			font-family: "book antiqua";
			font-size: 30px;
			margin-top: 20px;
		}
		
		.u-login {
			width: 20%;
			float: right;
			text-align: center;
			padding-top: 30px;
		}
		/*清除浮动*/
		
		.u-space {
			clear: both;
		}
		
		a {
			text-decoration: none;
			color: #000000;
		}
		/*导航栏*/
		
		.m-navi {
			text-align: center;
			position: fixed;
			top: 75px;
			width: 15%;
			height: 100%;
			background-color: #265A88;
		}
		.m-navi > li:nth-child(2){
			background-color: #C4E3F3;
		}
		.m-navi > li:hover{
			box-shadow:4px 2px 6px  #000000;
		}
		.m-navi> li {
			height: 30px;
			padding-top: 15px;
			list-style: none;
		}
		
		.m-navi> li>a {
			display: block;
		}
		
		.m-navi> li:hover {
			background-color: #C4E3F3;
		}
		/*表格*/
		.m-list {
			width: 500px;
			height: auto;
			text-align: center;
		}
		
		/*主体内容*/
		.u-text{
			width: 40%;
			height: 500px;
			padding-top: 50px;
			margin-left: 30%;
			/*margin-top: 10%;*/
		}
		
		#add-form{
			
		}
		.u-po{
			width: 300px;
			clear: both;
			margin-top: 15px;
		}
		.u-po>label{
			float: right;
			margin-right: 10px;
		}
		.u-po>input{
			float: right;
			width: 150px;
			height: 25px;
		}
		.u-potext{
			width: 400px;
			margin-top: 20px;
			margin-left: 105px;
			clear: both;
		}
		.u-potext>label{
			float: left;
		}
		.u-potext>textarea{
			margin-left: 10px;
			float: left;
		}
		input,textarea{
			border: 1px solid black;
			border-radius:4px;
			background-color: #C0C0C0;
		}
		input[type="submit"]{
			background-color: #419641;
			color: white;
			width: 75px;
			height: 30px;
			margin-top: 50px;
			margin-left: 120px;
			cursor: pointer;
		}
		select{
			float: right;
			width: 150px;
			height: 25px;
			border: 1px solid black;
			border-radius: 4px;
			background-color: #C0C0C0;
		}
	</style>

	<body>
		<div class="g-top">
			<div class="u-title">
				<h1>图书管理系统</h1>
			</div>
			<div class="u-login">
				<a href="/">进入主页</a>
			</div>
			<div class="u-space"></div>
		</div>

		<ul class="m-navi">
			<li>
				<a href="/hou">首页</a>
			</li>
			<li>
				<a href="/addBooks">修改</a>
			</li>
			<li>
				<a href="/booksList">列表</a>
			</li>
			<li>
				<a href="/classM">分类管理</a>
			</li>
			<li>
				<a href="/bringM">借阅管理</a>
			</li>
		</ul>

		<div class="g-body">
			<div class="u-text" style="text-align: center;">
				<form th:attr="action='/changePost/'+${book.id}" method="post" id="add-form">
					<div class="u-po"><input name="name" placeholder="请输入书名" th:value="${book.name}" required="required"/><label>书名</label></div>
					<br />
					<div class="u-po"><input name="author" placeholder="请输入作者" th:value="${book.author}" required="required"/><label>作者</label></div>
					<br />
					<div class="u-po"><input name="pressName" placeholder="请输入出版社" th:value="${book.pressName}" required="required"/><label>出版社</label></div>
					<br />
					<div class="u-po"><input id="demo" name="date" placeholder="2009-01-0" th:value="${book.date}" required="required"/><label>出版时间</label></div>
					<br />
					<div class="u-po">
						
						<select name="classesId">
							<option th:value="${clas.id}" th:text="${clas.clasName}"  th:each="clas,i:${classes}"></option>
						</select>
						<label>分类</label>
					</div>
					<br />
					<div class="u-potext">
						<label>描述</label>
					    <textarea name="decri" rows="5" cols="20" placeholder="此处应写描述内容" th:text="${book.decri}"></textarea>
					</div>
					<br/>
					<input type="submit" value="修改"/>
				</form>
				
			</div>
		</div>

		<div class="g-foot">
			<hr />
			<p class="u-btm">@2017西南科技大学网站设计布局样式</p>
		</div>
		<script>
			;
			! function() {
				laydate({
					elem: '#demo'
				})
			}();
		</script>
	</body>
    
    
</html>